<template>
	<view class="detai">
		<view class="detaitop">
			<view class="detaiimg">
				<image :src="obj.course.cover" mode=""></image>
			</view>
			<view class="detailcontent">
				<view class="dit">
					<view class="price" style="color: #4db5fb;">
						￥{{obj.course.price}}
					</view>
					<view class="goumai">
						{{obj.course.buyCount}}购买
					</view>
				</view>
				<view class="title1">
					{{obj.course.title}}
				</view>

			</view>
		</view>
		<view class="detaitop1">
			<view class="title2">
				讲师介绍
			</view>
			<view class="detailteacher">
				<view class="detailavator">
					<image :src="obj.course.avatar" mode=""></image>
				</view>
				<view class="detailright">
					<view class="detailname">
						{{obj.course.teacherName}}
					</view>
					<view class="intro">
						{{obj.course.intro}}
					</view>
				</view>
			</view>
			<view class="title2">
				课程详情
			</view>
			<view class="" v-html="obj.course.description">

			</view>
			<view class="title2">
				课程目录
			</view>
			<uni-collapse>
				<uni-collapse-item v-for="item in obj.chapterList" :title="item.title">
					<view class="" style="height: 40px;line-height: 40px" v-for="item2 in item.children">
						{{item2.title}}

					</view>
				</uni-collapse-item>

			</uni-collapse>
		</view>
		<view class="detaitop1" style="    padding-bottom: 16px;">
			<view class="title2">
				学员评价({{pjnum}}) <span style="float:right">查看全部></span>
			</view>
			<view v-for="item in pjlist" class="" style="overflow: hidden;">
				<view class="avator">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="pjright">
					<view class="">
						<p>{{item.nickname}}</p>
						<p style="color: #a1a5b2;">{{item.gmtCreate}}</p>
						<p>{{item.content}}</p>
					</view>
					<view class="">
						<uni-rate v-model="rateValue" />
					</view>
				</view>
			</view>
		</view>
		<view class="bnottom">
			<button v-if="obj.isCollect == false"
			@click="sc"
				style=" background-color: #ff7a38;border-radius:20px;width:80px;float:left;">收藏</button>
			<button v-if="obj.isCollect == true"
				style=" background-color: #ff7a38;border-radius:20px;width:100px;float:left;">已收藏</button>
			<button style="width:100px;float:right;color: #fff;background-color: #ff7a38;border-radius:20px;"
				type="default" @click="qxx">去学习</button>
			<button type="default"
			@click="djgm(obj.course.id)"
				style="width:100px;margin-right:15px; color: #fff;background-color: #ff7a38;border-radius:20px;float:right;"
				size="small">立即购买</button>
		</view>
	</view>
</template>
<style>
	.bnottom {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 80px;
		padding-top: 20px;
		box-sizing: border-box;
		background: #fff;
	}
</style>

<script setup>
	import '@/uni_modules/uni-scss/variables.scss'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		onMounted,
		ref
	} from "vue"
	import instance from "../../request";
	const rateValue = ref(5)
	const pjnum=ref(0);
	const obj = ref({});
	const pjlist = ref([]);
	onLoad(e => {
		console.log(e)
		getkcdetai(e)
		getpj(e)
	})
	const djgm=(e)=>{
		console.log(e)
		uni.navigateTo({
			url:`/pages/order/order?id=${e}`
		})
	}
	const qxx=()=>{
		uni.navigateTo({
			url:`/pages/video/video?id=${obj.value.course.id}`
		})
	}
	const getpj = async (e) => {
		const res = await instance.get(`/api/edu/comment/1/10?page=1&limit=10&courseId=${e.id}`);
		console.log(res)
	 pjnum.value=res.data.total
		pjlist.value = res.data.items
	}
	const sc=async()=>{
		const res=await instance.post(`/api/edu/courseCollect/auth/save/${obj.value.course.id}`);
		console.log(res)
		if(res.code == 200){
			uni.showToast({
				title:"收藏成功"
			})
			getkcdetai(obj.value.course)
		}
	}
	const getkcdetai = async (e) => {
		const res = await instance.get(`/api/edu/course/${e.id}`);
		console.log(res)
		obj.value = res.data
	}
	onMounted(() => {

	})
</script>

<style>
	button {
		color: #fff;
	}

	.avator image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avator {
		width: 75px;
		height: 75px;
		float: left;
	}

	.pjright {
		width: calc(100% - 75px);
		height: auto;
		display: flex;
		justify-content: space-between;

	}

	.intro {
		font-size: 12px;
		color: #000;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		margin-top: 11px;
	}

	.detailname {
		color: #000;
	}

	.detailright {
		width: calc(100% - 75px);
		height: auto;
		padding-left: 10px;
		float: right;
		box-sizing: border-box;
	}

	.detailavator image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.detailavator {
		width: 75px;
		height: 75px;
		float: left;

	}

	.detailteacher {
		margin-top: 15px;
		background: #f5f6fa;
		width: 100%;
		height: auto;
		padding: 15px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.detaitop1 {
		margin-top: 10px;
		background: #fff;
		padding: 10px;
		box-sizing: border-box;
	}

	.title1 {
		font-size: 18px;
		color: #000;
		font-weight: bold;
	}

	.price {
		font-size: 12px;
	}

	.goumai {
		color: #888;
		font-size: 12px;
	}

	.dit {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detaiimg {
		width: 100%;
		height: 210px;

	}

	.detailcontent {
		width: 100%;
		height: auto;
		padding: 15px;
		box-sizing: border-box;
	}

	.detaiimg image {
		width: 100%;
		height: 100%;

	}

	page {
		width: 100%;
		height: 100%;
	}

	.detai {
		width: 100%;
		height: 100%;
		background-color: rgba(78, 52, 37, 0.2);
		padding: 10px 10px 80px 10px;
		box-sizing: border-box;
		overflow: auto;
	}

	.detaitop {
		width: 100%;
		height: auto;
		background: #fff;

	}
</style>